<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导览地图</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        <!-- 地图容器 -->
        <div class="h-screen">
            <img src="https://source.unsplash.com/800x1200/?map" alt="景区地图" class="w-full h-full object-cover">
            
            <!-- 地图标记点 -->
            <div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <div class="bg-blue-500 text-white rounded-full p-2 shadow-lg">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <p class="text-xs bg-white rounded px-2 py-1 mt-1 shadow">太和殿</p>
            </div>
        </div>

        <!-- 顶部搜索栏 -->
        <div class="absolute top-0 left-0 right-0 p-4 bg-white/80 backdrop-blur-sm">
            <div class="relative">
                <input type="search" class="w-full px-4 py-2 rounded-full bg-white shadow" placeholder="搜索景点">
                <i class="fas fa-search absolute right-4 top-3 text-gray-400"></i>
            </div>
        </div>

        <!-- 底部信息卡片 -->
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl shadow-lg p-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold">推荐路线</h3>
                <button class="text-blue-500">更多路线</button>
            </div>
            <div class="space-y-4">
                <div class="bg-gray-50 p-4 rounded-lg">
                    <div class="flex justify-between items-center">
                        <div>
                            <h4 class="font-bold">经典游览路线</h4>
                            <p class="text-sm text-gray-500 mt-1">全程约2小时</p>
                        </div>
                        <button class="bg-blue-500 text-white px-4 py-1 rounded-full text-sm">
                            开始
                        </button>
                    </div>
                    <div class="flex items-center mt-2 text-sm text-gray-500">
                        <span>午门</span>
                        <i class="fas fa-arrow-right mx-2"></i>
                        <span>太和殿</span>
                        <i class="fas fa-arrow-right mx-2"></i>
                        <span>中和殿</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧工具栏 -->
        <div class="absolute right-4 top-1/2 transform -translate-y-1/2 space-y-4">
            <button class="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center">
                <i class="fas fa-plus"></i>
            </button>
            <button class="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center">
                <i class="fas fa-minus"></i>
            </button>
            <button class="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center">
                <i class="fas fa-location-arrow"></i>
            </button>
        </div>
    </div>
</body>
</html>